<template>
  <div >
    <!--<Button @click="open">Vertical center</Button>-->
    <Modal
      title="添加派工信息"
      v-model="modal10"
      class-name="vertical-center-modal" v-show="isClose">
      <Form :model="formItem" :label-width="80">
        <Row class="first">
          <i-col span="12">
            <FormItem label="客户代码" >
              <Input v-model="formItem.input" class="info"></Input>
            </FormItem>
          </i-col>
          <i-col span="12">
          <FormItem label="反馈时间">
              <DatePicker type="date"  v-model="formItem.date" class="info"></DatePicker>
          </FormItem>
          </i-col>
        </Row>
        <Row class="second">
          <i-col :span="12">
            <FormItem label="问题大类" class="info">
              <Select v-model="formItem.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="问题小类" class="info">
              <Select v-model="formItem.select1">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <FormItem label="问题描述" class="third">
          <p v-model="formItem.textarea"></p>
        </FormItem>
        <p class="attention">为方便解决您的问题,请把问题描述具体:如订单号、原因、问题帐号等</p>
        <FormItem class="btn">
          <Button type="primary" >派工</Button>
        </FormItem>
      </Form>

    </Modal>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        modal10: false,
        isClose:true,
        formItem: {
          input: '',
          select: '',
          select1: '',
          switch: true,
          date: '',
          time: '',
          slider: [20, 50],
          textarea: ''
        }
      }
    },
    methods:{
      open(){
        this.modal10 = true;
        this.isClose=true
      }
    }
  }
</script>
<style>
  .ivu-modal-content{
    width:600px;
    height:460px;
    padding: 0 30px 0px 20px;
    border-bottom:20px solid #fff;
    border-radius: 20px;
  }
.attention{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
    color: #f27979;
    font-size: 12px;
  }
 .ivu-modal-header {
    border-bottom: none;
    padding: 0;
  }
 .ivu-modal-footer{display: none;border: none;}
 .ivu-modal-header .ivu-modal-header-inner{
    height:50px;
    line-height: 50px;
    color:#464c5b;
    font-size: 16px;
    border-bottom: 1px solid #e3e8ee;
  }
 .first{
    margin-top: 40px;
    margin-bottom: 0;
  }
 .second,.third{
    margin-top: 20px;
    margin-bottom: 0;
  }
 .info input,.info .ivu-select-selection{
    width: 180px !important;
    height: 30px !important;
    border-radius: 25px !important;
    border: 1px solid #e3e8ee !important;
    padding-left: 10px;
    line-height: 30px;
    color: #464c5b !important;
  }
.btn>.ivu-form-item-content{
    width: 80px;
    margin: 0px auto !important;
  }
 .ivu-btn{
    width: 80px;
    height: 30px;
    border-radius: 20px;
    background: #c3cbd6;
    border:none;
  }
 .third p{
    height:100px !important;
    border-radius: 20px;
    border:1px solid #e3e8ee;
  }
 .ivu-btn-primary:hover{
    background: #464c5b;
  }
 .ivu-form-item{
  margin-bottom: 0 !important;
}
</style>
